<template>
  <basic-container>
    <basic-header title="维修类型统计" />
    <filter-table :option="filterOption" @handle-filter="handleFilter" />
    <e-charts :options="dataOption"></e-charts>
  </basic-container>
</template>
<script>
import FilterTable from "@/components/FilterTable";
import actionTypes from "@/const/action";
import filterOption from "@/const/filters";
import ECharts from "@/components/ECharts";
import echarts from "echarts";
import { SyncGetStatisticsData } from "@/api/data";

const action = actionTypes.STATISTICS_TYPE;
const option = filterOption[action];

const DEFAULT_CHARTS_DATA = {
  dataZoom: [
    {
      type: "inside"
    }
  ],
  tooltip: {},
  xAxis: {
    data: [],
    name: "维修类型"
  },
  yAxis: { name: "订单数" },
  series: [
    {
      name: "订单数",
      type: "bar",
      data: [],
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#83bff6" },
        { offset: 0.5, color: "#188df0" },
        { offset: 1, color: "#188df0" }
      ])
    }
  ]
};

export default {
  name: "maintain",
  components: { FilterTable, ECharts },
  data() {
    return {
      filterOption: option,
      filterData: {},
      displayData: {},
      action: actionTypes.STATISTICS_TYPE,
      dataOption: DEFAULT_CHARTS_DATA
    };
  },
  created() {
    this.getStatisticsData();
  },
  methods: {
    handleFilter(data) {
      this.filterData = data;
      this.getStatisticsData();
    },
    async getStatisticsData() {
      const { data, error } = await SyncGetStatisticsData(
        this.action,
        this.filterData
      );

      if (error) {
        this.$message({
          type: "error",
          message: error.message || String(error)
        });
        return;
      }
      this.setChartsData(data.bussData);
    },
    setChartsData(data) {
      if (Array.isArray(data)) {
        let newxAxis = {
          data: []
        };
        let newData = {
          data: []
        };

        data.forEach(item => {
          newxAxis.data.push(item.name);
          newData.data.push(item.num);
        });
        this.dataOption = Object.assign({}, this.dataOption, {
          xAxis: newxAxis,
          series: [newData]
        });
      }
    }
  }
};
</script>

